<template>
  <div>
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>分类参数</el-breadcrumb-item>
</el-breadcrumb>

<el-card>
  <el-alert
    title="只允许为第三级分类设置相关参数！"
    type="warning"
    :closable="false"
    show-icon>
  </el-alert>

  <!--  -->
<el-row>
  <el-col>
    <span>选择商品分类</span>
    <el-cascader
    v-model="selectvalue"
    :options="options"
    :props="{ expandTrigger: 'hover' ,label:'cat_name',value:'cat_id'}"
    @change="handleChange"></el-cascader>
  </el-col>
</el-row>

<el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="动态参数" name="many">
       <el-button type="primary" size="mini" :disabled="isdis">添加参数</el-button>
         <el-table
           :data="list1"
           style="width: 100%">
         <el-table-column type="expand">
          <template slot-scope="props">
            
          </template>
         </el-table-column>
        <el-table-column
          label="参数名称"
          prop="attr_name">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="静态属性" name="only">
       <el-button type="primary" size="mini" :disabled="isdis">添加属性</el-button>
       <el-table
           :data="list2"
           style="width: 100%">
         <el-table-column type="expand">
          <template slot-scope="props">
          </template>
         </el-table-column>
        <el-table-column
          label="属性名称"
          prop="attr_name">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit1(scope.$index, scope.row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete1(scope.$index, scope.row)">Delete</el-button>
      </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>





  
</el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selectvalue:[],
        options:[],
        activeName: 'many',
        list1:[] ,  //动态参数
        list2:[]   //静态属性
      }
    },
    computed:{
       isdis(){
         if(this.selectvalue.length===3){
           return false
         }else{
           return true
         }
       },
       cateId(){  //分类id
           if(this.selectvalue.length===3){
             return this.selectvalue[2]
           }
       }
    },
    created () {
      this.getcates();
    },
    methods: {
      getlist(){
         this.$axios.get(`categories/${this.cateId}/attributes`,{
           params:{
             sel:this.activeName
           }
         })
         .then(res=>{
           console.log(res,0)
           if(this.activeName==='many'){
             this.list1=res.data
           }else{
             this.list2=res.data
           }
         })
      },
       handleEdit1(index, row) {
        console.log(index, row);
      },
      handleDelete1(index, row) {
        console.log(index, row);
      },
       handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      handleClick(tab, event) {   //当选择标签页发生变化时触发
        console.log(tab, event,"ea");
        this.getlist()
      },
      getcates(){
          this.$axios.get('categories')
          .then(res=>{
            console.log(res,"fl")
            this.options=res.data
          })
      },
      handleChange(value) {
        console.log(value,"内容改变");
        console.log(this.selectvalue)

        if(value.length!==3){
          this.selectvalue=[]
        }else{
         this.getlist()
        }
      }
    },
  }
</script>

<style scoped>

</style>